<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="../js/echarts.min.js"></script>
	</head>

	<body background="../image/4.jpeg" style=" background-repeat:no-repeat ;background-size:100% 100%;
			background-attachment: fixed;opacity=0.4">
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			//准备数据

			//图7
			var option = {
				color: ['rgba(255, 0, 0)', 'rgba(0, 255, 0)', 'rgba(225, 50, 220)'],
				title: {
					text: '销售金额季度雷达图',
					textStyle: {
						color: 'white',
						fontSize: '20'
					},
				},
				tooltip: {},
				legend: {
					orient: 'horizontal', // 垂直显示vertical
					x: 'left', // 显示位置--左上left,center,right
					left: '10%',
					top: '12%',
					width: '40%',
					textStyle: {
						color: 'white',
						fontSize: '10'
					},
					//data:['按摩椅','跑步机','微波炉','显示器','液晶电视'],
					data: ['跑步机', '显示器', '液晶电视'],
					itemWidth: 15,
					itemHeight: 8, //标记图形的长宽			 
				},
				radar: {
					// shape: 'circle',
					radius: '70%', //的半径占当前视图长度的百分比
					center: ['50%', '50%'], //饼图的圆心在当前视图中的位置
					indicator: [ //雷达图的指示器，用来指定雷达图中的多个变量（维度）
						{
							name: '第一季度',
							max: 1250000
						},
						{
							name: '第二季度',
							max: 400000
						},
						{
							name: '第三季度',
							max: 600000
						},
						{
							name: '第四季度',
							max: 2500000
						},
					],
					// 设置雷达图中间射线的颜色
					axisLine: {
						lineStyle: {
							color: 'rgba(250,250,250,0.9)', //射线的颜色
							fontSize: '8'
						},
					},
					splitArea: {
						show: true,
						areaStyle: {
							color: 'rgba(255,255,255,0.1)', // 图表背景的颜色
						},
					},
					splitLine: {
						show: true,
						lineStyle: {
							width: 1,
							color: 'rgba(255,255,255,0.3)', // 设置网格的颜色
						},
					},
				},
				// grid:[{left:'2%',top:'2%',height:'50%',width:'50%'},
				//       {left:'2%',bottom:'0%',height:'48%',width:'80%'},
				// ],
				x: [{
					gridIndex: 0
				}, {
					gridIndex: 1
				}],
				y: [{
					gridIndex: 0
				}, {
					gridIndex: 1
				}],
				series: [{
					type: 'radar',
					//lineStyle:{normal: {width: 2,opacity: 0.5,color:'rgb(0, 255, 0)'}},
					xAxisIndex: 0,
					yAxisIndex: 0,
					areaStyle: {
						normal: {
							width: 1,
							opacity: 0.5, //雷达图面积填充的透明度，alpha
						},
					},
					data: [
						/* {
      					   value: [54400,24800,110400,83200],
      					   name: '按摩椅',
      					   areaStyle: {
      								   color: 'rgba(0, 255, 0, 0.6)'
      					   },
      				       lineStyle:{normal: {width: 2,opacity: 0.5,color:'rgb(0, 255, 0)'}},
      	              }, */
						{
							value: [864600, 264000, 132000, 2156001],
							name: '跑步机',
							areaStyle: {
								color: 'rgba(255, 0, 0, 0.6)'
							},
							lineStyle: {
								normal: {
									width: 2,
									opacity: 0.5,
									color: 'rgb(255, 0, 0)'
								}
							},
						},
						/*  {
      					  value: [32500,47000,105000,14500],
      					   name: '微波炉',
      					   areaStyle: {
      					   											   color: 'rgba(0, 0, 255, 0.6)'
      					   },
      					   lineStyle:{normal: {width: 2,opacity: 0.5,color:'rgb(0, 0,255)'}},
      			      }, */
						{
							value: [79500, 367500, 409500, 444000],
							name: '显示器',
							areaStyle: {
								color: 'rgba(0, 255, 0, 0.6)'
							},
							lineStyle: {
								normal: {
									width: 2,
									opacity: 0.5,
									color: 'rgb(0, 255, 0)'
								}
							},
						},
						{
							value: [1205000, 125000, 550000, 315000],
							name: '液晶电视',
							areaStyle: {
								color: 'rgba(225,50,220, 0.6)'
							},
							lineStyle: {
								normal: {
									width: 2,
									opacity: 0.5,
									color: 'rgb(225, 50, 220)'
								}
							},
						}
					]
				}, ]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
	</body>

</html>